<script lang="ts">
    import { Motor_1, Motor_2, Motor_1_angle, Motor_2_angle, Motor_1_outtime, Motor_2_outtime } from '$lib/data';

    import { Progressbar, Indicator, Avatar, Badge, Spinner, Button, ButtonGroup } from 'flowbite-svelte';

    let {name} = $props();


</script>

{#if name=="1"}
    <ButtonGroup class="*:!ring-primary-700">
        <Button color="green" onclick={() => {$Motor_1 = 'online'}}>在线</Button>
        <Button color="red" onclick={() => {$Motor_1= 'offline'}}>离线</Button>
        <Button color="yellow" onclick={() => {$Motor_1 = 'reconnecting'}}>重连</Button>
    </ButtonGroup>
    {#if $Motor_1 == "online" }
        <Progressbar progress={$Motor_2_angle} animate labelOutside="电机二" />
    {:else if $Motor_1 == 'reconnecting' }
        <span>电机二</span>
        <Badge rounded color="yellow">
            <Progressbar progress=100 animate color="red" />
            <Spinner size="6" />
        </Badge>
    {:else if $Motor_1 == 'offline' }
        <span>电机二</span>
        <Badge rounded color="red">
            <Progressbar progress=0 animate />
        </Badge>
    {/if}
    <div class="flex-1 min-w-0">
        {#if $Motor_1 == "online" }
            <Badge color="green" rounded class="px-2.5 py-0.5">
                <Indicator color="green" size="xs" class="me-1" />
                Online
            </Badge>
        {:else if $Motor_1 == 'reconnecting' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="yellow" size="xs" class="me-1" />
                reconnecting
            </Badge>
        {:else if $Motor_1 == 'offline' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="red" size="xs" class="me-1" />
                Offline
            </Badge>
        {/if}
    </div>
{/if}

{#if name=="2"}
    <ButtonGroup class="*:!ring-primary-700">
            <Button color="green" onclick={() => {$Motor_2 = 'online'}}>在线</Button>
            <Button color="red" onclick={() => {$Motor_2 = 'offline'}}>离线</Button>
            <Button color="yellow" onclick={() => {$Motor_2 = 'reconnecting'}}>重连</Button>
    </ButtonGroup>
        {#if $Motor_2 == "online" }
            <Progressbar progress={$Motor_2_angle} animate labelOutside="电机二" />
        {:else if $Motor_2 == 'reconnecting' }
            <span>电机二</span>
            <Badge rounded color="yellow">
                <Progressbar progress=100 animate color="red" />
                <Spinner size="6" />
            </Badge>
        {:else if $Motor_2 == 'offline' }
            <span>电机二</span>
            <Badge rounded color="red">
                <Progressbar progress=0 animate />
            </Badge>
        {/if}
    <div class="flex-1 min-w-0">
        {#if $Motor_2 == "online" }
            <Badge color="green" rounded class="px-2.5 py-0.5">
                <Indicator color="green" size="xs" class="me-1" />
                Online
            </Badge>
        {:else if $Motor_2 == 'reconnecting' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="yellow" size="xs" class="me-1" />
                reconnecting
            </Badge>
        {:else if $Motor_2 == 'offline' }
            <Badge color="red" rounded class="px-2.5 py-0.5">
                <Indicator color="red" size="xs" class="me-1" />
                Offline
            </Badge>
        {/if}
    </div>
{/if}
